<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom的crud</title>
</head>
<body>
    <!-- HTML结构 -->
<p id="js">JavaScript</p>


<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<input type="password" name="" id="pwd"><button id = "show" onclick="showpwd()">显示密码</button>

<button id="submit" onclick="sub()">提交</button>

<font color = 'red' id="warning" hidden>密码为空</font>

<div id="checkbox">

    <input type="checkbox" name="all" id="all" value="1" ><label for="all">全选</label>
    <input type="checkbox" name="check1" id="check1" value="1" ><label for="check1">1</label>
    <input type="checkbox" name="check2" id="check2" value="2"><label for="check2">2</label>
    <input type="checkbox" name="check3" id="check3" value="3"><label for="check3">3</label>
    <input type="checkbox" name="check4" id="check4" value="4"><label for="check4">4</label>

    <button onclick="all1()">全选</button>
</div>

<button onclick="addNode()">新增</button>
<button onclick="removeNode()">删除</button>

<script>

let pwd = document.querySelector('#pwd');
let show = document.querySelector('#show');
let font = document.querySelector('#warning');
let checks = document.querySelectorAll("input[type='checkbox']")

console.log(checks);

function all1(){

    console.log(1);
    for(let i = 0;i<checks.length;i++){

        console.log(checks[i]);
        checks[i].checked = true;
    }
}


/* false代表hidden不存在 */
font.hidden = true;


function sub(){

    console.log(pwd.value);
    if(pwd.value==''){
        font.hidden= false;
    }else{
        font.hidden = true;
    }
}


function showpwd(){

    if(show.innerText=='显示密码'){
        show.innerText = "隐藏密码";
        pwd.type = 'text';
    }else{
        show.innerText = "显示密码";
        pwd.type = 'password';
    }
   
}


/* 获取父节点 */
    let father = document.querySelector('#list');

    //获取新增的节点
    let new_node = document.querySelector('#js');

   


   function addNode(){

    /* 将已经存在的节点加入进去 */
    father.appendChild(new_node);

    //创建新节点   参数是tag名字
    let creat = document.createElement('p')

    //构建这个节点,操作跟正常获取的一致
    creat.innerText = "C++"
    creat.id = "cpp"

    /* 放入新节点,先创建新节点 */
    father.appendChild(creat)

    /* 根据某个节点位置增加 */
    father.insertBefore()

    }

    function removeNode(){

        /* 获取删除的节点 */
        let cpp = father.querySelector('#cpp');

        let java = father.querySelector('#scheme')

        father.removeChild(cpp);

    }

</script>
</body>
</html>